<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '新增组员任务',
			size: '65%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :disabled="saving" :model="form" :rules="rules">
			<el-form-item label="总目标">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="月份：">{{ info.date }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="事业部：">{{ info.biz_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="部门：">{{ info.dept_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="分公司：">{{ info.company_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="品牌：">{{ info.bra_name }}</cl-filter>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="加微数(月)：">
								<span class="color-danger">
									{{ info.vorder_total }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="加微数(日)：">
								<span class="color-danger">
									{{ info.vorder_day }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="定金数(月)：">
								<span class="color-danger">
									{{ info.old_new_vorder_total }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="定金数(日)：">
								<span class="color-danger">
									{{ info.old_new_vorder_day }}
								</span>
							</cl-filter>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item prop="user_ids">
				<template #label>
					组员
					<el-button type="text" icon="el-icon-circle-plus" @click="addStaff">
						新增组员
					</el-button></template
				>
				<el-card shadow="never" body-style="padding-bottom:10px">
					<el-checkbox-group v-model="form.user_ids" @change="setTargetList">
						<el-row>
							<el-col
								:lg="4"
								:md="6"
								:sm="12"
								class="mb-1"
								v-for="item in userList"
								:key="item.user_id"
							>
								<el-checkbox :label="item.user_id">
									{{ item.user_name }}
								</el-checkbox>
							</el-col>
						</el-row>
					</el-checkbox-group>
				</el-card>
			</el-form-item>
			<el-form-item label="目标计划">
				<el-card shadow="never">
					<el-table :data="form.target_list" border>
						<el-table-column label="组员" prop="user_name" />
						<el-table-column label="加微数(月)" prop="vorder_total">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`target_list.${$index}.vorder_total`"
									:rules="rules.vorder_total"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model.number="row.vorder_total"
										@input="quantityTotalChange(row)"
									/>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="加微数(日)" prop="vorder_day">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`target_list.${$index}.vorder_day`"
									:rules="rules.vorder_day"
									:show-message="false"
									:inline-message="true"
								>
									<el-input v-model.number="row.vorder_day" />
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="新客定金数(月)" prop="old_new_vorder_total">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`target_list.${$index}.old_new_vorder_total`"
									:rules="rules.old_new_vorder_total"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model.number="row.old_new_vorder_total"
										@blur="
											row.old_new_vorder_total = Number($event.target.value)
										"
										oninput="value=value.replace(/[^\d^\.]/g,'')"
										@input="budgetChange(row)"
									/>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="新客定金数(日)" prop="old_new_vorder_day">
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`target_list.${$index}.old_new_vorder_day`"
									:rules="rules.old_new_vorder_day"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model.number="row.old_new_vorder_day"
										@blur="row.old_new_vorder_day = Number($event.target.value)"
										oninput="value=value.replace(/[^\d^\.]/g,'')"
									/>
								</el-form-item>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-form-item>
		</el-form>
		<!-- 新增组员 -->
		<cl-staff-form ref="addStaff" @confirm="getManageDeptUser" :isModal="false" />
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
import qs from "qs";
import { getTargetRows } from "@/utils";
import { validate } from "@/utils/validate";

export default {
	name: "add-group-task",
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			form: {
				user_ids: [],
				target_list: [] // 目标
			},
			rules: {
				user_ids: [{ required: true, message: "请选择组员" }],
				vorder_total: [
					{ required: true, message: "请填写加微数(月)" },
					{ validator: validate.targetVal("目标不能为0") }
				],
				vorder_day: [
					{ required: true, message: "请填写加微数(日)" },
					{ validator: validate.targetVal("目标不能为0") }
				],
				old_new_vorder_total: [
					{ required: true, message: "请填写定金数(月)" },
					{ validator: validate.targetVal("目标不能为0") }
				],
				old_new_vorder_day: [
					{ required: true, message: "请填写定金数(日)" },
					{ validator: validate.targetVal("目标不能为0") }
				]
			},
			saving: false,
			userList: []
		};
	},
	methods: {
		open() {
			this.$refs.drawer.create(() => {
				this.form.target_list = [];
				this.getManageDeptUser();
				this.$nextTick(() => {
					this.reset();
				});
			});
		},
		close() {
			this.reset();
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { target_list } = this.form;
				const { p_id, biz_id } = this.info;
				let form = {
					p_id: p_id
				};
				target_list.forEach((v) => {
					form[`vorder_total${v.uid}`] = v.vorder_total;
					form[`vorder_day${v.uid}`] = v.vorder_day;
					form[`old_new_vorder_total${v.uid}`] = v.old_new_vorder_total;
					form[`old_new_vorder_day${v.uid}`] = v.old_new_vorder_day;
				});
				this.saving = true;
				await this.$service.preSale.addgrouptarhet(qs.stringify(form)).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},
		//新增组员
		addStaff() {
			this.$refs.addStaff.open("add", {});
		},
		// 获取组员
		async getManageDeptUser() {
			const { dept_id, biz_id } = this.info;
			this.userList = [];
			if (!dept_id) return;
			const data = await this.$service.user.deptuserlists({
				post: 1,
				dept_id,
				biz_id
			});
			this.userList = data;
		},
		// 加微数
		quantityTotalChange(row) {
			const { event_month } = this.info;
			if (!row.vorder_total || !event_month) return;
			let days = dayjs(event_month).daysInMonth();
			row.vorder_day = Math.round(row.vorder_total / days);
		},
		// 定金数
		budgetChange(row) {
			const { event_month } = this.info;
			if (!row.old_new_vorder_total || !event_month) return;
			let days = dayjs(event_month).daysInMonth();
			row.old_new_vorder_day = Math.round(row.old_new_vorder_total / days);
		},
		// 生成目标列表
		setTargetList() {
			const { user_ids } = this.form;
			let userList = this.userList
				.filter((v) => user_ids.includes(v.user_id))
				.map((v) => ({
					user_name: v.user_name,
					user_id: v.user_id
				}));
			let checkList = [userList];
			let targetList = getTargetRows(checkList).map((v) => {
				let item = v.reduce((prev, curr) => ({ ...prev, ...curr }), {
					vorder_total: 0,
					vorder_day: 0,
					old_new_vorder_total: 0,
					old_new_vorder_day: 0
				});
				return {
					...item,
					uid: `[${item.user_id}]`
				};
			});
			this.form.target_list = targetList;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table {
		.el-form-item {
			margin-bottom: 0 !important;
		}
	}
}
.row-item {
	margin-bottom: 15px;
}
</style>
